<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>播放器</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准 mui.css-->
    <!--App 自定义的 css-->
    <style>
        .footer{
            width: 20px;
            margin: 0 auto;
            position: fixed;
            top: 5px;
            padding: 0px 10px 0px 0px;
            z-index: 1111;
            right: 0;
            background-color:white;
        }
        form{
            font-size: 1em;
            /*position: absolute;*/
            top: 0;
            left: 0;
            height: 100%;
        }
        body{
            position: absolute;
        }
        img{
            width: 20px;
            height: 20px;
            margin: 0 5px;
        }
        input[type="range"]{
            height: 10px;
            border: 0;
            background-color: #cccccc;
            border-radius: 5px;
            position: relative;
            -webkit-appearance: none !important;
            outline: none;
            top: -5px;
        }
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #000000;
        }
        .hide{
            display:none;
        }
        .show{
            display: flex;
            position: absolute;
            /*top:5px;*/
            left:5px;
        }
        #widthAdd,#heightAdd{
            position:relative;
            width: 30px;
            height: 30px;
            top:-5px
        }
        .show img,span{
            top:10px;
            margin-left:5px
        }
        .show p{
            margin-top:0;
            margin-left:5px
        }
    </style>
    <script>
        //发送数据
        function xhrsend(d,n){
            let xhr = new XMLHttpRequest();
            xhr.open("POST", "/set_event", true);
            xhr.setRequestHeader("Content-type", "application/json");
            xhr.onreadystatechange = function () {
                var XMLHttpReq = xhr;
                if (XMLHttpReq.readyState == 4) {
                    if (XMLHttpReq.status == 200) {
                        var text = XMLHttpReq.responseText;
                        console.log(text);
                    } else {
                        console.log(XMLHttpReq.status)
                    }
                } else {
                    console.log(XMLHttpReq.readyState);
                }
            };
            //xhr.send(d?`{"name": "${n?n:'c'}","value":"${d}"}`:'{"name": "cancel"}');
        };
        //function xhrsend(d,n) {
        //xhr.send(d?`{"name": "${n?n:'c'}","value":"${d}"}`:'{"name": "cancel"}');
        //}
        function sleep(time) {
            return new Promise((resolve, reject)=> {
                setTimeout(function(){
                    resolve()
                }, parseInt(time))
            })
        }
        async function touch(k) {
            //xhrsend(k,'touch')
        }
        function showMsg(m){
            showD.innerHTML =m
        }
    </script>
</head>

<body>
<form id="form" name="showUI_commit" method="post" action="/set_event">
    <div id="player">
        <img id="retard" src="walking.png" alt="-"/>
        <img id="playK" src="play.png" style="display: none" alt="▶"/>&nbsp
        <!--<label></label>▼✖♬-->
        <img id="pauseK" style="margin: 0 10px 0 -4px"  src="pause.png" alt="❚❚"/>
        <img id="accelerate" src="exercise.png" alt="+">
        <!--<label style="transform:rotate(90deg);webkit-transform:rotate(90deg)">〓</label>-->
        <img id="playlistK" src="playlist.png" alt="♬"/>
        <img id="settingK" src="settings.png" alt="⚙"/>
        <!--<label>♬</label>-->
        <input id="range" type="range" width="400" min="0" max="30" value="0">
        <!--<img src="https://img.icons8.com/ios/2x/grand-piano.png"/-->
        <span id="showD"></span>
        <div class="footer">
            <img id="cancel" src="close.png">
        </div>
    </div>

    <div id="settingW" class="hide" style="z-index:1112">
        <p style="width: 50px">位置：</p>
        <p id="up">↑</p>&nbsp&nbsp&nbsp<br>
        <p id="down">↓</p>&nbsp&nbsp<br>
        <p id="left">←</p>&nbsp&nbsp<br>
        <p id="right">→</p>&nbsp&nbsp&nbsp&nbsp&nbsp<br>
        <p>宽：</p>
        <img id="widthR" src="width.png" alt="-"/>&nbsp
        <img id="widthAdd" src="width2.png"  alt="+"/>&nbsp&nbsp&nbsp
        <p>高：</p>
        <img id="heightR" src="height.png" alt="-"/>
        <img id="heightAdd" src="height2.png"  alt="+"/>&nbsp
        <img id="black" src="close.png">
    </div>
</form>
<p id="test"></p>
<script type="text/javascript">
    window.onerror = function(message,url,line){
        // 汇报错误
        //var e=document.getElementById("musicName")
        var e="执行" + url + "文件中的第" + line + "行代码出错，错误信息：" + message;
        run(`dialog(${e})`)
        window.onerror = null;
        // 不希望此错误继续扩散
        return true;
    };

    //变量定义
    playing=1//播放状态,0为暂停
    progress=0//播放进度，用来控制进度条和控制歌曲进度
    speed=1//播放速度
    q=2//默认时值
    sTime=200//默认一拍
    pauseing=0//是否特殊暂停状态，是时不播放

    //可变函数
    //速度调节
    changeSpeed=b=> {speed=(music.sTime||sTime)/(l.b+=b)/(music.b||1)}
    //rangeTouchStart
    //进度条变动
    changeRange=p=>{
        progress=p
    }
    //播放
    play=()=>{
        if(pauseing)return;
        playing=1;
        playK.style.display='none';
        pauseK.style.display=""
    }
    //暂停
    pause=()=>{
        playing=0;
        pauseK.style.display="none";
        playK.style.display=''
    }
    //按键绑定
    //    actions.onclick = commit
    pauseK.onclick=()=>{pauseing=0;pause()}
    playK.onclick=()=>{pauseing=1;play()}
    cancel.onclick=()=>xhrsend('lua_exit()','run')
    range.addEventListener('change',function(){changeRange(this.value)})
    document.addEventListener('touchstart',pause)
    document.addEventListener('touchend',play)
    up.onclick=()=>changeWin({y:-10})
    left.onclick=()=>changeWin({x:-10})
    right.onclick=()=>changeWin({x:10})
    down.onclick=()=>changeWin({y:10})
    widthR.onclick=()=>changeWin({w:-10})
    widthAdd.onclick=()=>changeWin({w:10})
    heightR.onclick=()=>changeWin({h:-10})
    heightAdd.onclick=()=>changeWin({h:10})
    playlistK.onclick=()=>run('lua_restart()')
    black.onclick=()=>{
        settingW.classList.add('hide');
        settingW.classList.remove('show');
        player.classList.remove('hide')
        play()
    }
    settingK.onclick=()=>{
        settingW.classList.remove('hide');
        settingW.classList.add('show');
        player.classList.add('hide')
        pause()
    }
    function changeWin(t) {
        let s=JSON.stringify(t);
        xhrsend(s.replace(/\"/g,'@'),'change');
    }
    function commit() {//数据提交按钮点击
        let t={}
        let s=JSON.stringify(t);
        //s=s.substr(1,s.length-2)
        s=s.replace(/\"/g,'@')
        xhrsend(s);
    };
    //从lua加载的变量
    l={}//]]..(jsonStr or'{}')..[[
        //音乐内容
        //music={name:'',
        //    score:{},//自写版
        //   playData:{},//弦外版
        //   q:2,
        //   sTime:200,
        //}
        music=[{"name":"波西米亚狂想曲 Bohemian Rhapsody 烛子ikina","author":"","arrangedBy":"","transcribedBy":"","permission":"","bpm":300,"bitsPerPage":16,"pitchLevel":10,"songNotes":[{"time":0,"key":"2Key0"},{"time":400,"key":"2Key4"},{"time":800,"key":"2Key7"},{"time":1200,"key":"2Key9"},{"time":1600,"key":"2Key5"},{"time":1600,"key":"1Key12"},{"time":2000,"key":"2Key4"},{"time":2400,"key":"2Key4"},{"time":2400,"key":"1Key11"},{"time":2800,"key":"2Key4"},{"time":3200,"key":"2Key0"},{"time":3200,"key":"1Key2"},{"time":3600,"key":"2Key4"},{"time":4000,"key":"2Key7"},{"time":4400,"key":"2Key9"},{"time":4800,"key":"2Key5"},{"time":4800,"key":"1Key12"},{"time":5200,"key":"2Key4"},{"time":5600,"key":"2Key4"},{"time":5600,"key":"1Key11"},{"time":6000,"key":"2Key4"},{"time":6400,"key":"2Key0"},{"time":6400,"key":"1Key9"},{"time":6600,"key":"1Key9"},{"time":6800,"key":"2Key4"},{"time":7200,"key":"2Key7"},{"time":7600,"key":"2Key9"},{"time":8000,"key":"2Key5"},{"time":8000,"key":"1Key12"},{"time":8400,"key":"2Key4"},{"time":8800,"key":"2Key4"},{"time":8800,"key":"1Key11"},{"time":9200,"key":"2Key4"},{"time":9200,"key":"1Key7"},{"time":9600,"key":"2Key5"},{"time":9600,"key":"1Key8"},{"time":10000,"key":"2Key2"},{"time":10000,"key":"1Key9"},{"time":10200,"key":"1Key9"},{"time":10400,"key":"2Key7"},{"time":10800,"key":"2Key9"},{"time":11200,"key":"2Key6"},{"time":11200,"key":"1Key13"},{"time":11600,"key":"2Key5"},{"time":12000,"key":"2Key5"},{"time":12000,"key":"1Key12"},{"time":12400,"key":"2Key5"},{"time":12400,"key":"1Key9"},{"time":12600,"key":"1Key9"},{"time":12800,"key":"2Key8"},{"time":12800,"key":"1Key10"},{"time":13000,"key":"1Key11"},{"time":13200,"key":"2Key3"},{"time":13400,"key":"1Key10"},{"time":13600,"key":"2Key5"},{"time":13800,"key":"1Key9"},{"time":14000,"key":"2Key3"},{"time":14400,"key":"1Key8"},{"time":14800,"key":"2Key1"},{"time":15200,"key":"1Key8"},{"time":15600,"key":"2Key1"},{"time":15600,"key":"1Key9"},{"time":16000,"key":"2Key8"},{"time":16000,"key":"1Key10"},{"time":16200,"key":"1Key11"},{"time":16400,"key":"2Key3"},{"time":16600,"key":"1Key10"},{"time":16800,"key":"2Key5"},{"time":17000,"key":"1Key9"},{"time":17200,"key":"2Key3"},{"time":17400,"key":"1Key8"},{"time":17600,"key":"2Key6"},{"time":18000,"key":"2Key3"},{"time":18400,"key":"2Key4"},{"time":18800,"key":"2Key6"},{"time":19200,"key":"2Key0"},{"time":19200,"key":"1Key9"},{"time":19400,"key":"1Key9"},{"time":19600,"key":"2Key4"},{"time":20000,"key":"2Key7"},{"time":20400,"key":"2Key9"},{"time":20800,"key":"2Key5"},{"time":20800,"key":"1Key12"},{"time":21200,"key":"2Key4"},{"time":21600,"key":"2Key4"},{"time":21600,"key":"1Key9"},{"time":22000,"key":"2Key4"},{"time":22000,"key":"1Key11"},{"time":22400,"key":"2Key5"},{"time":22400,"key":"1Key13"},{"time":22800,"key":"2Key2"},{"time":23000,"key":"1Key12"},{"time":23200,"key":"2Key5"},{"time":23200,"key":"1Key12"},{"time":23600,"key":"2Key7"},{"time":24000,"key":"2Key6"},{"time":24000,"key":"1Key13"},{"time":24400,"key":"2Key5"},{"time":24800,"key":"2Key5"},{"time":24800,"key":"1Key12"},{"time":25200,"key":"2Key5"},{"time":25200,"key":"1Key12"},{"time":25600,"key":"2Key8"},{"time":25600,"key":"1Key14"},{"time":26000,"key":"2Key3"},{"time":26000,"key":"1Key14"},{"time":26400,"key":"2Key5"},{"time":26400,"key":"1Key14"},{"time":26800,"key":"2Key8"},{"time":26800,"key":"1Key14"},{"time":27200,"key":"2Key1"},{"time":27200,"key":"2Key8"},{"time":27200,"key":"1Key14"},{"time":27600,"key":"1Key12"},{"time":28000,"key":"2Key0"},{"time":28000,"key":"2Key7"},{"time":28000,"key":"1Key10"},{"time":28400,"key":"1Key9"},{"time":28800,"key":"2Key6"},{"time":28800,"key":"1Key8"},{"time":29200,"key":"2Key1"},{"time":29600,"key":"2Key3"},{"time":30000,"key":"2Key5"},{"time":30400,"key":"2Key1"},{"time":30400,"key":"2Key6"},{"time":31200,"key":"2Key0"},{"time":31200,"key":"2Key5"},{"time":32000,"key":"2Key0"},{"time":32000,"key":"1Key9"},{"time":32200,"key":"1Key9"},{"time":32400,"key":"2Key0"},{"time":32800,"key":"2Key2"},{"time":33200,"key":"2Key0"},{"time":33600,"key":"2Key4"},{"time":34000,"key":"2Key0"},{"time":34400,"key":"2Key6"},{"time":34400,"key":"1Key8"},{"time":34800,"key":"2Key0"},{"time":34800,"key":"1Key9"},{"time":35000,"key":"1Key10"},{"time":35200,"key":"2Key5"},{"time":35200,"key":"1Key9"},{"time":35600,"key":"2Key5"},{"time":36000,"key":"2Key7"},{"time":36400,"key":"2Key9"},{"time":36800,"key":"2Key6"},{"time":36800,"key":"1Key13"},{"time":37200,"key":"2Key5"},{"time":37600,"key":"2Key5"},{"time":37600,"key":"1Key12"},{"time":38000,"key":"2Key5"},{"time":38000,"key":"1Key9"},{"time":38400,"key":"2Key1"},{"time":38400,"key":"2Key8"},{"time":38400,"key":"1Key10"},{"time":39000,"key":"1Key9"},{"time":39200,"key":"2Key1"},{"time":39200,"key":"2Key8"},{"time":39200,"key":"1Key9"},{"time":39600,"key":"1Key8"},{"time":39800,"key":"1Key8"},{"time":40000,"key":"2Key0"},{"time":40000,"key":"2Key7"},{"time":40800,"key":"2Key0"},{"time":40800,"key":"2Key7"},{"time":41400,"key":"1Key4"},{"time":41600,"key":"1Key4"},{"time":42000,"key":"2Key4"},{"time":42000,"key":"1Key8"},{"time":42400,"key":"2Key4"},{"time":42400,"key":"1Key8"},{"time":42800,"key":"2Key4"},{"time":42800,"key":"1Key9"},{"time":43000,"key":"1Key9"},{"time":43200,"key":"2Key4"},{"time":43600,"key":"2Key4"},{"time":43600,"key":"1Key10"},{"time":44000,"key":"2Key4"},{"time":44000,"key":"1Key10"},{"time":44400,"key":"2Key4"},{"time":44400,"key":"1Key11"},{"time":44600,"key":"1Key10"},{"time":44800,"key":"2Key0"},{"time":45000,"key":"1Key9"},{"time":45200,"key":"2Key0"},{"time":45600,"key":"2Key2"},{"time":46000,"key":"2Key0"},{"time":46000,"key":"1Key8"},{"time":46200,"key":"1Key9"},{"time":46400,"key":"2Key6"},{"time":46400,"key":"1Key11"},{"time":46800,"key":"2Key4"},{"time":47200,"key":"2Key6"},{"time":47600,"key":"2Key4"},{"time":47600,"key":"1Key8"},{"time":47800,"key":"1Key9"},{"time":48000,"key":"2Key5"},{"time":48000,"key":"1Key7"},{"time":48400,"key":"2Key2"},{"time":48800,"key":"2Key5"},{"time":49200,"key":"2Key2"},{"time":49400,"key":"1Key4"},{"time":49600,"key":"2Key3"},{"time":49600,"key":"1Key5"},{"time":50000,"key":"1Key6"},{"time":50200,"key":"1Key5"},{"time":50600,"key":"1Key6"},{"time":50800,"key":"1Key5"},{"time":51200,"key":"2Key0"},{"time":51200,"key":"1Key4"}]}]


    init=()=>{//初始化
            //
            //musicList = l.musicList||getCookie('musicList');
            if(!musicList)reload()
        }
        reload=()=>{//无缓存，重新加载

        }
        loadRange=max=>{
            //初始化进度条
            range.max=max
        }
        playMusic=()=>{
            l.b=l.b||1
            showMsg(music.name||l.name)
            music.score?play1():music.playData?play2():music[0].songNotes?txtMusic():jsMusic()
            //music.playData&&play2()
        }
        async function play1(){
            q=music.q||q
            speed=(music.sTime||sTime)/l.b/(music.b||1)
            //musicName.innerHTML=JSON.stringify(l)
            run('Point.setPoints(1)')
            range.min=progress=1
            let musicLength=music.length
            loadRange(musicLength)
            //str=''
            while (progress<musicLength){
                if(playing){
                    let note=music.score[progress]
                    range.value=progress++
                    //str+=note.toString()+'.'
                    if(isNaN(note)){
                        note.length===2?note[1]==8||touch(note[1])
                            :isNaN(note[0])||touch(note.toString().substr(note[0].toString().length+1))
                        await sleep(note[0]*speed)
                    }else{
                        note==8||touch(note)
                        await sleep(q*speed)
                    }
                }else await sleep(300)

            }
            xhrsend()
        }

    async function play2(){
        speed=(music.b||1)*l.b
        changeSpeed=function (b) {speed=(music.b||1)*(l.b+=b)}
        run('Point.setPoints(2)')
        progress=1
        let musicLength=music.length
        time=0
        loadRange(musicLength)
        if(music.playData[1]*1>900000){//v3
            changeRange=(p)=>{
                time=parseInt(music.playData[(progress=(p>=2?p:2))-2]/1000)
            }
            time=music.playData[1]/1000
            while (progress<musicLength){
                if(music.playData[progress]%2==0){
                    if(music.playData[progress]<time*1000){time=music.playData[progress++];run('nLog('+music.name+')')}
                    else {
                        let v = music.playData[progress] / 10
                        let t = parseInt(v / 100)
                        let s = parseInt((t - time) /speed)
                        showMsg(s)
                        time = t
                        await sleep(s)
                        if(playing) {
                            touch(v % 100)
                            range.value=progress++
                        }else await sleep(300)
                    }
                }else ++progress
            }
        }else{
            changeRange=(p)=>{
                time=parseInt(music.playData[(progress=(p>=1?p:1))-1]/100)
            }
            time=music.playData[1]/100
            while (progress<musicLength){
                if(music.playData[progress]<time*100){
                    time=music.playData[progress++];
                    run('nLog('+music.name+')')
                }
                else {
                    let v = music.playData[progress]
                    let t = parseInt(v / 100)
                    let s = parseInt((t - time) / speed)
                    time = t
                    //showMsg(s)
                    await sleep(s)
                    if(playing) {
                        range.value=progress++
                        touch(v % 100+1)
                        showMsg(v)
                    }else await sleep(300)
                }
            }
        }
        //await sleep(200)
        xhrsend()
    }
        async function jsMusic(){
            //showMsg(1)
            score={}
            length=0
            let touch=i=>{
                try {
                    score[length - 1][0] == 0 ?
                        score[length - 1][score[length - 1].length] = i :
                        score[++length] = [0, i]
                }catch (e){
                    score[++length] = [0, i]
                }
            }
            let sleep=t=>{
                try {
                    score[length - 1][0] == 0 ?
                        score[length - 1][0] = t :
                        score[++length] = [t, 8]
                }catch (e){
                    score[++length] = [t, 8]
                }
            }
            mSleep=sleep
            c4=A1=()=>touch(1)
            d4=A2=()=>touch(2)
            e4=A3=()=>touch(3)
            f4=A4=()=>touch(4)
            g4=A5=()=>touch(5)
            a4=A6=()=>touch(6)
            b4=A7=()=>touch(7)
            c5=z1=B1=()=>touch(11)
            d5=z2=B2=()=>touch(12)
            e5=z3=B3=()=>touch(13)
            f5=z4=B4=()=>touch(14)
            g5=z5=B5=()=>touch(15)
            a5=z6=B6=()=>touch(16)
            b5=z7=B7=()=>touch(17)
            c6=g1=C1=()=>touch(21)
            Y100=()=>sleep(100)
            Y150=()=>sleep(150)
            Y200=()=>sleep(200)
            Y250=()=>sleep(250)
            Y300=()=>sleep(300)
            Y350=()=>sleep(350)
            Y400=()=>sleep(400)
            Y450=()=>sleep(450)
            Y500=()=>sleep(500)
            Y550=()=>sleep(550)
            Y600=()=>sleep(600)
            Y650=()=>sleep(650)
            Y700=()=>sleep(700)
            Y750=()=>sleep(750)
            Y800=()=>sleep(800)
            Y850=()=>sleep(850)
            Y900=()=>sleep(900)
            time=357
            time1=178
            time2=714
            t1=()=> sleep(time)
            t2=()=> sleep(time1)
            t3=()=> sleep(time2)
            t4=()=> sleep(100)
            pi = 60000 / 32
            O=()=>sleep(pi)
            T=()=>sleep(pi/2)
            F=()=>sleep(pi/4)
            E=()=>sleep(pi/8)
            S=()=>sleep(pi/16)

            function z() {
                d1 = A1
                d2 = A2
                d3 = A3
                d4 = A4
                d5 = A5
                d6 = A6
                d7 = A7
            }
            one = 1714;
            two = one / 2;
            four = two / 2;
            eight = four / 2;
            sixteen = eight / 2;
            Y1=()=>sleep(one)
            Y2=()=>sleep(two)
            Y4=()=>sleep(four)
            Y8=()=>sleep(eight)
            Y16=()=>sleep(sixteen)

            let exit=()=>{}
            //showMsg(1)



            //eval('showMsg(2)')
            try{
                eval(music)
                music={score:score,sTime:1,length:length}
                sleep=this.sleep//(t)=>{if(playing)changeRange(progress+=t);this.sleep(t)}
                touch=this.touch
                await play1()
            }catch(e){run('showui_view.close();require("music/"..r.name)')}
            //showMsg(JSON.stringify(score))

        }
        async function txtMusic(){
            //run("dialog(1)")
            score=music[0].songNotes
            score=score.sort((a,b)=>{return a.time-b.time})
            //showMsg(JSON.stringify(score))
            speed=(music.b||1)*l.b//60/(music[0].songNotes.b||music[0].songNotes.bpm)/l.b
            changeSpeed=function (b) {speed=(music.b||1)*(l.b+=b)}
            changeRange=(p)=>{
                time=parseInt(score[(progress=(p>=1?p:1))-1].time)
            }
            run('Point.setPoints(2)')
            time=score[0].time
            let musicLength=score.length,s
            loadRange(musicLength)
            str=''
            while (progress<musicLength){
                s=parseInt((score[progress].time-time)/speed)
                time=score[progress].time
                await sleep(s)
                //str+=s+','
                if(playing) {
                    range.value=progress
                    touch(score[progress++].key.substr(4)*1+1)
                    //str+=(score[progress++].key.substr(4)*1+1)+','
                }else await sleep(300)
            }
            //showMsg(str)
            xhrsend()
        }
        function run(s) {
            xhrsend(s,'run')
        }
        function setCookie(name,value,t) {
            var Days = t||365;
            var exp = new Date();
            exp.setTime(exp.getTime() + Days*86400000);
            document.cookie = name + "="+ decodeURI (value) + ";expires=" + exp.toGMTString();
        }
        function getCookie(name) {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg))
                return decodeURIComponent(arr[2]);
            else
                return null;
        }
        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval=getCookie(name);
            if(cval!=null)
                document.cookie= name + "="+cval+";expires="+exp.toGMTString();
        }
        accelerate.onclick=async function(){changeSpeed(0.1);run('toast('+l.b+')')}
        retard.onclick=async function(){changeSpeed(-0.1);run('toast('+l.b+')')}
        //setTimeout(()=>play(),100)
    //]]..r.startPlay..[[&&pauseK.click();
    playMusic()
</script>
</body>
</html>